<template>
    <div class="container">
        <Carousel :images-list="imagesList" />
        <CarouselSeamless
            :images-list="imagesList"
            height="400px"
            @change="handleItemChange"
            @content-item-click="handleItemClick" />
    </div>
</template>

<script setup lang="ts">
import Carousel from "./Carousel.vue";
import CarouselSeamless from "./CarouselSeamless.vue";

const imagesList = [
    "https://picsum.photos/600/200?random=1",
    "https://picsum.photos/600/200?random=2",
    "https://picsum.photos/600/200?random=3"
];
// const imagesList = ["1", "2", "3"];

const handleItemChange = (item: string, index: number) => {
    console.log("当前切换的item", item);
    console.log("当前切换的index", index);
};
const handleItemClick = (item: string, index: number) => {
    console.log("当前点击的item", item);
    console.log("当前点击的index", index);
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
}
</style>
